<template>
  <view class="page">
    <cu-custom bgColor="bg-white" :isBack="false">
      <block slot="content">我的订单</block>
    </cu-custom>

    <scroll-view scroll-x class="bg-white nav" scroll-with-animation>
      <view class="flex text-center">
        <view
          class="cu-item flex-sub"
          @click="changeTab(item.status)"
          :class="item.status == order_status ? 'text-blue cur' : ''"
          v-for="(item, index) in tabs"
          :key="index"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>

    <view class="order_list">
      <view class="items" v-for="(order, idx) in orders" :key="idx">
        <view class="flex justify-between solid-bottom padding-bottom-sm">
          <view class="flex align-center">
            <view class="margin-right-xs">{{ order.title }}</view>
            <view class="text-grey text-sm">下单时间：{{ order.time }}</view>
          </view>
          <view :class="getStatusInfo(order.status).color">
            {{ getStatusInfo(order.status).text }}
          </view>
        </view>

        <view class="flex align-center margin-bottom-xs margin-tb">
          <view class="circle-badge margin-right bg-black">寄</view>
          <view class="padding-bottom-xs text-sm">
            <view>{{ order.from.phone }}</view>
            <view>{{ order.from.address }}</view>
          </view>
        </view>

        <view class="flex align-center margin-top-xs">
          <view class="circle-badge margin-right bg-blue">收</view>
          <view class="padding-bottom-xs text-sm">
            <view>{{ order.to.phone }}</view>
            <view>{{ order.to.address }}</view>
          </view>
        </view>

        <view class="text-right">
          <view class="text-price text-red text-xxl text-bold">{{ order.price }}</view>
        </view>

        <view class="order_tips text-sm">
          <view class="cuIcon-notificationfill margin-right-xs"></view>
          <view>{{ order.tips }}</view>
        </view>

        <view class="solid-bottom padding-bottom-sm"></view>

        <view class="flex justify-between margin-top align-center">
          <view class="flex text-sm">
            <view class="text-blue margin-right">客服</view>
            <view class="text-orange">投诉</view>
          </view>
          <view class="flex">
            <button class="cu-btn round margin-right bg-gradual-orange">立即支付</button>
            <button class="cu-btn round">取消订单</button>
          </view>
        </view>
      </view>

      <!-- 加载提示 -->
      <view class="text-center padding" v-if="loading">加载中...</view>
      <view class="text-center padding" v-else-if="!hasMore">没有更多了</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tabs: [
        { name: '全部', status: '' },
        { name: '待付款', status: 1 },
        { name: '服务中', status: 2 },
        { name: '已完成', status: 3 },
        { name: '已取消', status: 4 }
      ],
      order_status: '',
      orders: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: false
    };
  },
  onLoad() {
    this.getOrderList(); // 初始加载
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++;
      this.getOrderList();
    }
  },
  methods: {
    changeTab(status) {
      this.order_status = status;
      this.page = 1;
      this.orders = [];
      this.hasMore = true;
      this.getOrderList();
    },
    getOrderList() {
      this.loading = true;

      // 模拟接口数据
      setTimeout(() => {
        const mockData = [];
        for (let i = 0; i < this.pageSize; i++) {
          const index = (this.page - 1) * this.pageSize + i + 1;
          mockData.push({
            title: '踏板电动车',
            time: '2025-05-27',
            status: this.order_status === '' ? 1 : this.order_status, // 模拟不同状态
            from: {
              phone: '18574781227',
              address: '湖南省株洲市芦淞区'
            },
            to: {
              phone: '18574781227',
              address: '湖南省株洲市芦淞区'
            },
            price: '99.9',
            tips: '您好，立即支付后，有专人上门取车'
          });

        }

        if (mockData.length < this.pageSize) {
          this.hasMore = false;
        }

        this.orders = this.orders.concat(mockData);
        this.loading = false;
      }, 800);
    },
	getStatusInfo(status) {
	  switch (status) {
	    case 1:
	      return { text: '待付款', color: 'text-orange' };
	    case 2:
	      return { text: '服务中', color: 'text-blue' };
	    case 3:
	      return { text: '已完成', color: 'text-green' };
	    case 4:
	      return { text: '已取消', color: 'text-grey' };
	    default:
	      return { text: '未知状态', color: 'text-grey' };
	  }
	}

  }
};
</script>
<style scoped>
	.items {
	  background-color: #ffffff;
	  margin: 30rpx;
	  padding: 25rpx 20rpx; /* 左右padding减小 */
	  border-radius: 20rpx;
	  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}
	.circle-badge {
	  width: 50rpx;
	  height: 50rpx;
	  line-height: 50rpx;
	  color: #fff;
	  text-align: center;
	  border-radius: 50%;
	  font-size: 24rpx;
	}
	.order_tips{
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		background-color: rgb(255,243,230);
		padding: 10rpx;
		padding-left: 20rpx;
		margin-top: 10rpx;
		color: red;
		width: 85%;
	}
</style>

